<template>
  <view class="toast-lottery-wrap" v-if="details.activity_id">
    <image
      class="tips-img"
      :src="type[details.res].img"
      mode="widthFix"
      @tap="onClick"
    />
    <u-count-down
      v-if="details.res == 0 && details.open_time > 0"
      :timestamp="details.open_time"
      @change="onChangeCountDown"
      @end="onEnd"
      class="down-s"
    >
      <text class="time">{{ hour }}:{{ minute }}:{{ second }}</text>
    </u-count-down>
  </view>
</template>
<script>
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  data() {
    return {
      timeData: 0,
      type: {
        0: {
          img:
            this.$IMG_URL +
            '/uploads/20230609/1c55e746a0b514d080ef25aefe9e6c0c.png',
        },
        1: {
          img:
            this.$IMG_URL +
            '/uploads/20230609/2225af0b7ba86121828c7bbb6535c795.png',
        },
        2: {
          img:
            this.$IMG_URL +
            '/uploads/20230609/658e184a5017f413640521984d2125b3.png',
        },
      },
      total: 0,
      details: {
        activity_id: '',
        box_id: '',
        res: '',
        open_time: '',
      },
    };
  },
  // 计算属性 适配者模式
  computed: {
    hour() {
      let d = parseInt(this.timeData / 60 / 60 / 24);
      let s = parseInt((this.timeData / 60 / 60) % 24);
      let e = d * 24 + s;
      return e >= 10 ? e : '0' + e;
    },
    minute() {
      let s = parseInt((this.timeData / 60) % 60);
      return s >= 10 ? s : '0' + s;
    },
    second() {
      let s = parseInt(this.timeData % 60);
      return s >= 10 ? s : '0' + s;
    },
  },
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   * 在实例初始化之前被调用
   */
  beforeCreate() {},
  // 在实例创建完成后被立即调用
  created() {},
  // 在挂载开始之前被调用
  beforeMount() {},
  // 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用nextTick
  mounted() {
    this.getData();
  },
  // 数据更新时调用，发生在虚拟 DOM 打补丁之前
  beforeUpdate() {},
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated() {},
  // 实例销毁之前调用。在这一步，实例仍然完全可用
  beforeDestroy() {},
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {},
  methods: {
    getData() {
      //
      this.$http('v1.getfullOpenRes', {}).then((res) => {
        if (res.code === 1) {
          this.details = res.data?.list[0] || {};
          this.total = res.data.total;
        }
      });
    },
    onChangeCountDown(e) {
      this.timeData = e;
      // console.log(e);
    },
    onEnd() {
      this.getData();
    },
    onClick() {
      uni.navigateTo({
        url: `/pages/fullopen/fullopen?id=${this.details.activity_id}&box_id=${this.details.box_id}`,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.toast-lottery-wrap {
  position: fixed;
  top: 47vh;
  right: 10rpx;
  z-index: 40;

  .tips-img {
    width: 128rpx;
    height: 128rpx;
  }
  .down-s {
    position: absolute;
    bottom: -28rpx;
    left: 50%;
    transform: translateX(-50%);
    padding: 2rpx 14rpx;
    min-width: 90rpx;
    border-radius: 17rpx;
    background: rgba(148, 139, 240, 0.4);
    color: rgba(127, 117, 232, 1);
    font-size: 22rpx;
    font-weight: 400;
  }
}
</style>
